<template>
    <div>
      <Header :title="title"></Header>
      <div class="aui-padded-10 aui-bg-f contact">
            <div class="contact-list aui-ftn14">
                <div class="title">咨询热线</div>
                <span class="aui-font-weight" v-text="contact.phone" id="phone"
                      data-clipboard-action="copy"
                      :data-clipboard-text="contact.phone"
                      @click="fnCopyText('#phone')"></span>
            </div>
            <div class="contact-list aui-ftn14">
                <div class="title">客服QQ群</div>
                <span class="aui-font-weight"  v-text="contact.qun"  id="qun"
                      data-clipboard-action="copy"
                      :data-clipboard-text="contact.qun"
                      @click="fnCopyText('#qun')"></span>
            </div>
            <div class="contact-list-other">
                <div class="title aui-ftn14">客服二维码</div>
                <div class="aui-text-center">
                    <img :src="contact.wx_qrcode" alt=""  @click="utils.fnPreviewPic([contact.wx_qrcode])">
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script>
    import Index from '../../service/index.js'
    export default {
      data () {
        return {
          title: '联系方式',
          contact: {}
        }
      },
      mounted() {
        this.init()
      },
      methods: {
        init: function() {
          Index.fnGetContact().then(ret => {
            if (ret && ret.status) {
                this.contact = ret.data;
            }
          })
        },
        // 复制
        fnCopyText: function(el) {
          let vm = this;
          let clipboard = new this.clipboard(el);
          clipboard.on("success", function() {
            vm.utils.fnMsg("复制成功");
          });
          clipboard.on("error", function() {
            vm.utils.fnMsg("复制失败");
          });
        }
      }
    }
  </script>
  
  <style>
    .contact .contact-list {
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .contact .contact-list .title {
        width: 100px;
    }

    .contact .contact-list-other {
        padding: 10px 0;
    }
    .contact .contact-list-other img{
        width: 250px;
        height: 250px;
        display: block;
        margin: 0 auto;
    }
</style>
  